import { useState } from "react"
function Demo7() {
    return (
        <div className="main_box">
            <h1>本案例展示 react插槽的使用方式</h1>
            <div className="main_row">
                <Son1> 我是匿名插槽 </Son1>
                <Son2 header={<span>我是具名插槽header</span>} footer={<span>我是具名插槽footer</span>} />
                <Son3
                    main={({ data }) => (
                        <div>
                            我是作用域插槽{data.name}---{data.age}
                        </div>
                    )}
                />
            </div>

            <div className="main_row">
                <div>React没有插槽的概念，可以通过 props实现 </div>
                <p>1.匿名插槽，利用props.children实现，可以是文本或者节点 </p>
                <p>2.具名插槽，利用props实现，插槽名就是props属性名，比如header、main等 </p>
                <p>3.作用域插槽，父组件通过props传入一个回调函数，回调函数返回文本或节点，参数由子组件传入</p>
            </div>
        </div>
    )
}

function Son1(props) {
    return (
        <div>
            {/* 相当于vue的匿名插槽 */}
            {props.children}
        </div>
    )
}

function Son2(props) {
    return (
        <div>
            {/* 相当于vue的具名插槽 */}
            {props.header}
            {props.footer}
        </div>
    )
}

function Son3({ main }) {
    const [data, setData] = useState({ name: "张三", age: 18 })
    return (
        <div>
            {/* 相当于vue的作用域插槽 */}
            {main({ data })}
        </div>
    )
}

export default Demo7
